<template>
  <el-table :data="comments" style="width: 100%;">
    <el-table-column label="文章标题">
      <template #default="scope">
        <div class="comment-list">
          <div>
            <el-tag type="info" size="small" effect="plain">会员</el-tag>
            {{scope.row.username}} 评论了你的文章【{{scope.row.articleTitle}}】
          </div>
          <div>
            {{scope.row.createTime}}
          </div>
        </div>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination layout="prev, pager, next"
                 :total="count"
                 :page-size="pageSize"
                 :current-page="page"
                 @current-change="handlePaginationCurrentChange"
                 style="margin-top: 20px;"></el-pagination>
</template>

<script>
  export default {
    data() {
      return {
        comments: [],
        page: 1,
        pageSize: 0,
        count: 0
      }
    },
    mounted() {
      this.getData()
    },
    methods: {
      getData() {
        this.$http({
          path: '/comment/findbyauthor',
          method: 'get',
          params: {
            page: this.page,
            author: this.$store.state.user.username
          }
        }).then(rel => {
          const {result, page, pageSize, count} = rel.data
          this.comments = result
          this.page = page
          this.pageSize = pageSize
          this.count = count
        })
      },
      handlePaginationCurrentChange(pageIdx) {
        this.page = pageIdx
        this.getData()
      }
    }
  }
</script>

<style scoped>
.comment-list{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
